<template>
	<!-- 筛选学院 -->
	<view class="screencolleges-container">
		<!-- 头部搜索区 -->
		<SearchHeader placeholder="请输入学院名称" @setSearchValue="getSearchValue">
			<!-- 返回按钮 -->
			<template #back>
				<navigator open-type="navigateBack" class="search-back"><u-icon name="arrow-left" size="28rpx"
						color="#000"></u-icon>
				</navigator>
			</template>
		</SearchHeader>

		<!-- 索引列表 -->
		<u-index-list :index-list="indexList">
			<view v-for="(item, index) in itemArr" :key="index">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, i) in item" :key="cell" @tap="handleCell(cell)">
						{{cell.name}}
					</view>
				</u-index-item>
			</view>
		</u-index-list>


	</view>
</template>

<script>
	import SearchHeader from '@/componets/SearchHeader/SearchHeader.vue'
	export default {
		data() {
			return {
				indexList: [],
				itemArr: [],
				name: '',
			}
		},
		methods: {

			getCollegesList() {
				this.indexList = []
				this.itemArr = []
				this.$request.post({
					url: '/api/appointment/schoolGate',
					data: {
						name: this.name
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						let data = res.result.data.sort((a, b) => {
							return a.first_letter < b.first_letter ? -1 : a.first_letter > b.first_letter ? 1 : 0
						})
						let arr = []
						for (let item of data) {
							arr.push(item.first_letter)
						}
						this.indexList = [...new Set(arr)]
						let arr1 = []
						for (let item of this.indexList) {
							arr1 = []
							for (let ite of data) {
								if (item == ite.first_letter) {
									arr1.push(ite)
								}
							}
							if (arr1.length == 0) return
							this.itemArr.push(arr1)
						}
					}
				})
			},

			/**
			 * 获取改变后的搜索框的值
			 * @param {string} value 搜索框的值
			 */
			getSearchValue(value) {
				this.name = value
				this.getCollegesList()
			},

			/**
			 * 点击索引列表
			 * @param {string|number} id 点击内容的id
			 */
			handleCell(value) {
				uni.setStorageSync('college', value)
				uni.navigateBack()
			}
		},
		components: {
			SearchHeader
		},
		onLoad() {
			this.getCollegesList()
		}
	}
</script>

<style lang="less" scoped>
	.screencolleges-container {
		width: 100%;
		min-height: 100vh;

		.search-back {
			width: 16rpx;
			height: 28rpx;
			margin-right: 56rpx;
		}

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
	}
</style>